<template>
  <div class="app-container">
   
   
    <el-tabs v-model="activeName" v-if="showCard" >
       
          <el-tab-pane  label="纸箱采购单" name="first">
           <el-row :gutter="20">
        <el-col :span="24" :xs="24">                      
          <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="订单号" prop="订单号">
              <el-input
                v-model="queryParams1.order_id"
                placeholder="请输入订单号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
              <el-form-item label="制表日期" prop="制表日期">
              <el-date-picker type="daterange" v-model="queryParams.采购日期" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="供应商" prop="供应商">
              <el-input
                v-model="queryParams1.contract"
                placeholder="请输入供应商"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="采购合同号" prop="采购合同号">
              <el-input
                v-model="queryParams1.supplier"
                placeholder="请输入采购合同号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            
            <el-form-item label="联系电话" prop="联系电话">
                <el-input
                v-model="queryParams1.phone_no"
                placeholder="请输入联系话"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
         
            
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
            </el-form-item>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAddComm3"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          </el-col>
          </el-row>
        
            <el-table :data="box_order_data1" v-loading="loading" :row-class-name="rowClassName" @row-click="change_detail1">
      <el-table-column prop="order_id" label="订单号"/>
      <el-table-column prop="supplier" label="供应商"/>
      <el-table-column prop="buy_contract" label="采购合同号"/>
      <el-table-column prop="do_table_date" label="制表日期"/>
      <el-table-column prop="phone_no" label="联系电话"/>
       <el-table-column align="center" label="封口方式" prop="sealingType"></el-table-column>
        <el-table-column align="center" label="打包方式" prop="packingType"></el-table-column>
        <el-table-column align="center" label="正唛" prop="frontMarking">
          <template slot-scope="scope">
            <image-preview :src="scope.row.frontMarking" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="侧唛" prop="backMarking">
          <template slot-scope="scope">
              <image-preview :src="scope.row.backMarking" :width="50" :height="50" />
          </template>
        </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
         <template #default="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm1(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 

            <h2 align="center">{{detail_others0}}纸箱采购单</h2>
            <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm1">新增纸箱明细</el-button>
            </el-col>
          </el-row>
          <el-table :data="boxdata" v-loading="loading" :span-method="objectSpanMethod">
    <el-table-column prop="box_id" label="序号" align="center" />
    <el-table-column prop="cus_ware_no" label="客人货号" align="center" />
    <el-table-column prop="fac_ware_no" label="工厂货号" align="center" />
    <el-table-column prop="color" label="颜色" align="center" />
    <el-table-column prop="order_no" label="订单数量(pcs)" align="center" />
    <el-table-column prop="box_kind" label="纸箱类别" align="center" width="150px"/>
    <el-table-column prop="box_rate" label="装箱率" align="center" width="150px"  />
    <el-table-column label="纸箱尺寸" align="center" width="150px" >
        <el-table-column label="长" prop="length" />
        <el-table-column label="宽" prop="width" />
        <el-table-column label="高" prop="height" />
    </el-table-column>
    <el-table-column prop="weight" label="毛重" align="center" width="150px"  />
    <el-table-column prop="pure_weight" label="净重" align="center" width="150px" />
    <el-table-column prop="total_box_no" label="总箱数" align="center" width="150px"  />
    <el-table-column prop="mater_requ" label="材质要求" align="center" width="150px"  />
    <el-table-column prop="send_date" label="交货日期" align="center" width="150px"  />
    <el-table-column label="操作" fixed="right"  align="center">
      <template #default="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm1(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 
  
          </el-tab-pane>
      <el-tab-pane label="其他辅料采购单" name="second">
          <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="订单号" prop="订单号">
              <el-input
                v-model="queryParams2.order_id"
                placeholder="请输入订单号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
              <el-form-item label="制表日期" prop="制表日期">
              <el-date-picker type="daterange" v-model="queryParams.采购日期" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" clearable style="width: 240px" />
          </el-form-item>
            <el-form-item label="供应商" prop="供应商">
              <el-input
                v-model="queryParams2.supplier"
                placeholder="请输入供应商"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="采购合同号" prop="采购合同号">
              <el-input
                v-model="queryParams2.contract"
                placeholder="请输入采购合同号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            
            <el-form-item label="联系电话" prop="联系电话">
                <el-input
                v-model="queryParams2.phone_no"
                placeholder="请输入联系话"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
         
            
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
            </el-form-item>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAddComm4"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          </el-col>
          </el-row>
           <el-table :data="box_order_data2" v-loading="loading" @row-click="change_detail2">
      <el-table-column prop="order_id" label="订单号"/>
      <el-table-column prop="supplier" label="供应商"/>
      <el-table-column prop="buy_contract" label="采购合同号"/>
      <el-table-column prop="do_table_date" label="制表日期"/>
     <el-table-column label="附件">
      <template #default="scope">
         <span @click="resendUrl(scope.row)" style="cursor: pointer;">{{ scope.row.image }}</span>
      </template>
    </el-table-column>
      <el-table-column prop="phone_no" label="联系电话"/>
      <el-table-column label="操作" align="center" fixed="right">
         <template #default="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm2(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table >
    <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 
      <br>
        <h2 align="center">{{detail_others}}其他辅料采购单</h2>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm2">新增其他辅料明细</el-button>
            </el-col>
          </el-row>
        <el-table :data="menus_order" v-loading="loading">
        <el-table-column prop="id" label="序号" align="center" width="150px"/>
        <el-table-column prop="order_id" label="订单号" align="center" width="150px" />
        <el-table-column prop="ware_id" label="货号" align="center" width="150px"/>
        <el-table-column prop="name" label="商品名称" align="center" width="150px"/>
        <el-table-column prop="ware_size" label="规格型号尺寸" align="center" width="150px"/>
        <el-table-column prop="mate_qua" label="材质" align="center" width="150px"/>
        <el-table-column prop="unit" label="单位" align="center" width="150px"/>
        <el-table-column prop="ware_no" label="数量" align="center" width="150px"/>
        <el-table-column prop="send_date" label="交货期" align="center" width="150px"/>
        <el-table-column prop="comment" label="备注" align="center" width="150px" />
        <el-table-column label="操作" fixed="right"  align="center">
      <template #default="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm2(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
        </el-table>
        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 
      </el-tab-pane>
        </el-tabs> 

<el-dialog :title="titleComm1" :visible.sync="openComm1" width="1000px" append-to-body>
      <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
        <el-row>
          <el-col :span="10">
               <el-form-item label="序号" prop="序号">
          <el-input v-model="form.id" placeholder="请输入序号"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="客人货号" prop="客人货号">
          <el-input v-model="form.name" placeholder="请输客人货号"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="颜色" prop="颜色">
             <el-input v-model="form.specification" placeholder="请输入颜色"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10">
            <el-form-item label="订单数量" prop="订单数量">
          <el-input v-model="form.unit" placeholder="请输入订单数量"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
           <el-form-item label="纸箱类别" prop="纸箱类别">
         <el-select v-model="queryParams.warehouse" placeholder="请选择纸箱类别" @change="handleQuery">
                    <el-option label="外箱(HX)" value="外箱(HX)"></el-option>
                    <el-option label="中盒(ZH)" value="中盒(ZH)"></el-option>
                    <el-option label="内盒(NH)" value="内盒(NH)"></el-option>
                    <el-option label="彩盒(CH)" value="彩盒(CH)"></el-option>
                     <el-option label="隔板(GB)" value="隔板(GB)"></el-option>
                      <el-option label="白盒(BH)" value="白盒(BH)"></el-option>
                       <el-option label="展示盒(ZSH)" value="展示盒(ZSH)"></el-option>
                        <el-option label="衬箱(CX)" value="衬箱(CX)"></el-option>
                </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="10">
            <el-form-item label="装箱率" prop="装箱率">
          <el-input v-model="form.subunit" placeholder="请输入装箱率"></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
            <el-form-item label="纸箱尺寸" prop="纸箱尺寸">
          <el-input v-model="form.subunit" placeholder="请输入纸箱长度"></el-input>
           <el-input v-model="form.subunit" placeholder="请输入纸箱宽度"></el-input>
            <el-input v-model="form.subunit" placeholder="请输入纸箱高度"></el-input>
        </el-form-item>
        </el-col>

        <el-col :span="10">
          
        <el-form-item label="毛重" prop="毛重">
          <el-input v-model="form.subunit" placeholder="请输入毛重"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          
        <el-form-item label="净重" prop="净重">
          <el-input v-model="form.subunit" placeholder="请输入净重"></el-input>
        </el-form-item>
        </el-col>

        <el-col :span="10">
          
        <el-form-item label="总箱数" prop="总箱数">
          <el-input v-model="form.subunit" placeholder="请输入总箱数"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="10">
           <el-form-item label="材质要求" prop="材质要求">
          <el-input v-model="form.subunit" placeholder="请输入材质要求"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10">
           <el-form-item label="交货日期" prop="交货日期">
          <el-input v-model="form.subunit" placeholder="请输入交货日期"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
      
    <el-dialog :title="titleComm2" :visible.sync="openComm2" width="1000px" append-to-body>
      <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">

        <el-row>
          <el-col :span="10">
              <el-form-item label="序号" prop="序号">
          <el-input v-model="form.id" placeholder="请输入序号"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="订单号" prop="订单号">
          <el-input v-model="form.name" placeholder="请输入订单号"></el-input>
        </el-form-item>
          </el-col>
        </el-row>

         <el-row>
          <el-col :span="10">
                 <el-form-item label="货号" prop="货号">
          <el-input v-model="form.specification" placeholder="请输入货号"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
              
        <el-form-item label="商品名称" prop="商品名称">
          <el-input v-model="form.unit" placeholder="请输入商品名称"></el-input>
        </el-form-item>
          </el-col>
        </el-row>

         <el-row>
          <el-col :span="10">
               <el-form-item label="规格型号尺寸" prop="规格型号尺寸属性">
          <el-input v-model="form.subunit" placeholder="请输入规格型号尺寸"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
                 <el-form-item label="材质" prop="材质">
          <el-input v-model="form.subunit" placeholder="请输入材质"></el-input>
        </el-form-item>
          </el-col>
        </el-row>

         <el-row>
          <el-col :span="10">
             <el-form-item label="单位" prop="单位">
          <el-input v-model="form.subunit" placeholder="请输入单位"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
                  <el-form-item label="数量" prop="数量">
          <el-input v-model="form.subunit" placeholder="请输入数量"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
      
         <el-row>
          <el-col :span="10">
          
         <el-form-item label="交货期" prop="交货期">
          <el-input v-model="form.subunit" placeholder="请输入交货期"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
          <el-form-item label="备注" prop="备注">
          <el-input v-model="form.subunit" placeholder="请输入备注"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="titleComm3" :visible.sync="openComm3" width="1000px" append-to-body>
      <el-form :model="form_main1" ref="form_main1" label-width="100px">
        <el-row>
          <el-col :span="10">
              <el-form-item label="订单号" prop="订单号" >
          <el-input v-model="form.id" placeholder="请输入订单号"></el-input>
              </el-form-item>
          </el-col>
            <el-col :span="10">
               <el-form-item label="供应商" prop="供应商">
                   <el-input v-model="form.id" placeholder="请输入供应商"></el-input>
               </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
                 <el-form-item label="采购合同号" prop="采购合同号">
          <el-input v-model="form.id" placeholder="请输入采购合同号"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="制表日期" prop="制表日期">
          <el-input v-model="form.id" placeholder="请输入制表日期"></el-input>
        </el-form-item>
          </el-col>
         
        </el-row>
        <el-row>
           <el-col :span="10">
            
        <el-form-item label="联系电话" prop="联系电话">
          <el-input v-model="form.id" placeholder="请输入联系电话"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="封口方式" prop="封口方式">
          <el-input v-model="form.id" placeholder="请输入封口方式"></el-input>
        </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
              <el-form-item label="打包方式" prop="打包方式">
          <el-input v-model="form.id" placeholder="请输入打包方式"></el-input>
        </el-form-item>
          </el-col>
         
        </el-row>

        <el-row>
    <el-col :span="10">
      <h3>正唛</h3>
      <el-upload
        class="avatar-uploader custom-upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-col>
    <el-col :span="10">
      <h3>侧唛</h3>
      <el-upload
        class="avatar-uploader custom-upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-col>
  </el-row>
      </el-form>
      <br>
      <hr>
      <h2 align="center">新增纸箱明细</h2>
       <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm1">新增纸箱明细</el-button>
            </el-col>
          </el-row>
      <el-table :data="boxdata" v-loading="loading" :span-method="objectSpanMethod">
    <el-table-column prop="box_id" label="序号" align="center" />
    <el-table-column prop="cus_ware_no" label="客人货号" align="center" />
    <el-table-column prop="fac_ware_no" label="工厂货号" align="center" />
    <el-table-column prop="color" label="颜色" align="center" />
    <el-table-column prop="order_no" label="订单数量(pcs)" align="center" />
    <el-table-column prop="box_kind" label="纸箱类别" align="center" width="150px"/>
    <el-table-column prop="box_rate" label="装箱率" align="center" width="150px"  />
    <el-table-column label="纸箱尺寸" align="center" width="150px" >
        <el-table-column label="长" prop="length" />
        <el-table-column label="宽" prop="width" />
        <el-table-column label="高" prop="height" />
    </el-table-column>
    <el-table-column prop="weight" label="毛重" align="center" width="150px"  />
    <el-table-column prop="pure_weight" label="净重" align="center" width="150px" />
    <el-table-column prop="total_box_no" label="总箱数" align="center" width="150px"  />
    <el-table-column prop="mater_requ" label="材质要求" align="center" width="150px"  />
    <el-table-column prop="send_date" label="交货日期" align="center" width="150px"  />
    <el-table-column label="操作" fixed="right"  align="center">
      <template #default="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm1(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 

    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="titleComm4" :visible.sync="openComm4" width="1000px" append-to-body>
      <el-form :model="form_main1" ref="form_main1" label-width="100px">
        <el-row>
          <el-col :span="10">
              <el-form-item label="订单号" prop="订单号">
          <el-input v-model="form.id" placeholder="请输入订单号"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
        <el-form-item label="供应商" prop="供应商">
          <el-input v-model="form.id" placeholder="请输入供应商"></el-input>
        </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
              <el-form-item label="采购合同号" prop="采购合同号">
                 <el-input v-model="form.id" placeholder="请输入采购合同号"></el-input>
              </el-form-item>
          </el-col>

          <el-col :span="10">
           <el-form-item label="制表日期" prop="制表日期">
                <el-input v-model="form.id" placeholder="请输入制表日期"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
                  <el-form-item label="联系电话" prop="联系电话">
          <el-input v-model="form.id" placeholder="请输入联系电话"></el-input>
        </el-form-item>
          </el-col>
        
        <el-col :span="10">
           <el-form-item label="新增附件" prop="新增附件">
     <el-upload
      class="avatar-uploader small-upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
           </el-form-item>
          
             
        </el-col>
        </el-row>
     
          
        
      </el-form>
     
<hr>
  <h2 align="center">{{detail_others}}其他辅料采购单</h2>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm2">新增其他辅料明细</el-button>
            </el-col>
          </el-row>
        <el-table :data="menus_order" v-loading="loading">
        <el-table-column prop="id" label="序号" align="center" width="150px"/>
        <el-table-column prop="order_id" label="订单号" align="center" width="150px" />
        <el-table-column prop="ware_id" label="货号" align="center" width="150px"/>
        <el-table-column prop="name" label="商品名称" align="center" width="150px"/>
        <el-table-column prop="ware_size" label="规格型号尺寸属性" align="center" width="150px"/>
        <el-table-column prop="mate_qua" label="材质" align="center" width="150px"/>
        <el-table-column prop="unit" label="单位" align="center" width="150px"/>
        <el-table-column prop="ware_no" label="数量" align="center" width="150px"/>
        <el-table-column prop="send_date" label="交货期" align="center" width="150px"/>
        <el-table-column prop="comment" label="备注" align="center" width="150px" />
        <el-table-column label="操作" fixed="right"  align="center">
      <template #default="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm2(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
        </el-table>
<pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 
       
      
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
   
  </div>
</template>



 <script>

 export default{
  

  data() {
    return {
     url:'',
      titleComm2:null,
       titleComm1:null,
         titleComm3:null,
           titleComm4:null,
      total:0,
      open:false,
      openComm1:false,
        openComm2:false,
         openComm3:false,
            openComm4:false,
            queryParams:{

            },
      form:{},
      formComm:{},
      rules:{},
      rulesComm:{},
      orderNo: '',
      textarea: '',
      input1: '',
      input2: '',
      input3: '',
      orderNo: '',
      detail_supplier:'',
      detail_others0:'',
      detail_others:'',
    showCard: true,
    activeName: 'first',
    queryParams1:{
      order_id:'',
      supplier:'',
      contract:'',
      phone_no:''
    },
      
    queryParams2:{
      order_id:'',
      supplier:'',
      contract:'',
      phone_no:''
    }
    ,
    box_order_data1:[
      {
      order_id: 1 ,
      supplier: "兴隆纸箱厂" ,
      buy_contract:"GX171002加单",
      do_table_date:"2021-2-3",
      phone_no:"18745689638"
    },
    {
      order_id:2,
      supplier:"黄岩北城塑化器材厂",
      buy_contract:"230103",
      do_table_date:"2021-2-3",
      phone_no:"18745689638"
    },
    {
      order_id:3,
      supplier:"兴隆纸箱厂",
      buy_contract:"191003",
      do_table_date:"2021-2-3",
      phone_no:"18745689638"
    }
    ],
    box_order_data2:[
      {
      order_id: 1 ,
      supplier: "兴隆纸箱厂" ,
      buy_contract:"GX171002加单",
      do_table_date:"2021-2-3",
       image:"https://pic.52112.com/180420/180420_32/J9xjxe1jIg_small.jpg",
      phone_no:"18745689638"
    },
    {
      order_id:2,
      supplier:"黄岩北城塑化器材厂",
      buy_contract:"230103",
      do_table_date:"2021-2-3",
       image:"https://pic.52112.com/180420/180420_32/J9xjxe1jIg_small.jpg",
      phone_no:"18745689638"
    },
    {
      order_id:3,
      supplier:"兴隆纸箱厂",
      buy_contract:"191003",
      do_table_date:"2021-2-3",
       image:"https://pic.52112.com/180420/180420_32/J9xjxe1jIg_small.jpg",
      phone_no:"18745689638"
    }
    ],
    boxdata: [
        {
          box_id: 1,
          cus_ware_no: "A1-027195",
          fac_ware_no: "YL15912",
          color: "红",
          order_no: "4008",
          box_kind: "隔板",
          box_rate: 0,
          length:25,
          width: 15,
          height: 0,
          weight: 6.6,
          pure_weight: 5.6,
          total_box_no: 334,
          mater_requ: "三层",
          send_date: ""
        },
        {
          box_id: 2,
          cus_ware_no: "A1-027196",
          fac_ware_no: "YL15914",
          color: "绿",
          order_no: "4008",
          box_kind: "内箱",
          box_rate:  12,
          length:  36,
          width:  26,
          height: 9.5,
          weight: 9.8,
          pure_weight: 8.8,
          total_box_no: 334,
          mater_requ: "五层",
          send_date: ""
        },
        {
          box_id: 3,
          cus_ware_no: "A1-027197",
          fac_ware_no: "YL15916",
          color: "蓝",
          order_no: "4008",
          box_kind: "外箱",
          box_rate:  12,
          length: 30, 
          width: 25,
          height: 0,
          weight: 6.5,
          pure_weight: 6,
          total_box_no: 334,
          mater_requ: "五层无钉箱",
          send_date: ""
        },
        {
          box_id: 2,
          cus_ware_no: "A1-027195",
          fac_ware_no: "YL15912",
          color: "红",
          order_no: "4008",
          box_kind: "隔板",
          box_rate: 0,
          length:25,
          width: 15,
          height: 0,
          weight: 6.6,
          pure_weight: 5.6,
          total_box_no: 334,
          mater_requ: "三层",
          send_date: ""
        },
        {
          box_id: 2,
          cus_ware_no: "A1-027196",
          fac_ware_no: "YL15914",
          color: "绿",
          order_no: "4008",
          box_kind: "内箱",
          box_rate:  12,
          length:  36,
          width:  26,
          height: 9.5,
          weight: 9.8,
          pure_weight: 8.8,
          total_box_no: 334,
          mater_requ: "五层",
          send_date: ""
        },
        {
          box_id: 2,
          cus_ware_no: "A1-027197",
          fac_ware_no: "YL15916",
          color: "蓝",
          order_no: "4008",
          box_kind: "外箱",
          box_rate:  12,
          length: 30, 
          width: 25,
          height: 0,
          weight: 6.5,
          pure_weight: 6,
          total_box_no: 334,
          mater_requ: "五层无钉箱",
          send_date: ""
        },
        {
          box_id: 3,
          cus_ware_no: "A1-027195",
          fac_ware_no: "YL15912",
          color: "红",
          order_no: "4008",
          box_kind: "隔板",
          box_rate: 0,
          length:25,
          width: 15,
          height: 0,
          weight: 6.6,
          pure_weight: 5.6,
          total_box_no: 334,
          mater_requ: "三层",
          send_date: ""
        },
        {
          box_id: 3,
          cus_ware_no: "A1-027196",
          fac_ware_no: "YL15914",
          color: "绿",
          order_no: "4008",
          box_kind: "内箱",
          box_rate:  12,
          length:  36,
          width:  26,
          height: 9.5,
          weight: 9.8,
          pure_weight: 8.8,
          total_box_no: 334,
          mater_requ: "五层",
          send_date: ""
        },
        {
          box_id: 3,
          cus_ware_no: "A1-027197",
          fac_ware_no: "YL15916",
          color: "蓝",
          order_no: "4008",
          box_kind: "外箱",
          box_rate:  12,
          length: 30, 
          width: 25,
          height: 0,
          weight: 6.5,
          pure_weight: 6,
          total_box_no: 334,
          mater_requ: "五层无钉箱",
          send_date: ""
        }
      ],
      menus_order: [
                {
                    id: 1,
                    order_id: "ORD20250313004",
                    ware_id: "SKU0004",
                    name: "密胺餐盘",
                    ware_size: "直径28cm，深度3cm",
                    mate_qua: "食品级密胺材质",
                    unit: "个",
                    ware_no: 200,
                    send_date: "2025-03-28",
                    comment: "要求颜色为淡蓝色，图案为简约花卉"
                },
                {
                    id: 2,
                    order_id: "ORD20250313005",
                    ware_id: "SKU0005",
                    name: "密胺汤碗",
                    ware_size: "口径18cm，高度8cm",
                    mate_qua: "高品质密胺树脂",
                    unit: "个",
                    ware_no: 150,
                    send_date: "2025-03-30",
                    comment: "需经过高温消毒处理"
                },
                {
                    id: 3,
                    order_id: "ORD20250313006",
                    ware_id: "SKU0006",
                    name: "密胺筷子套装",
                    ware_size: "筷子长度25cm，包含10双筷子",
                    mate_qua: "环保密胺材料",
                    unit: "套",
                    ware_no: 80,
                    send_date: "2025-04-02",
                    comment: "包装采用透明塑料盒"
                }
            ],
            
      loading: false,
      dialogVisible: false,
      editForm: {
     }, 

      detailedData: [{
        id :'1',
        name :'纸箱',
        specification: '中号',
        unit: '150',
        subunit : '200',
      }, {
        id :'2',
        name :'袋子',
        specification: '小号',
        unit: '550',
        subunit : '500',
      },{
        id :'3',
        name :'彩盒',
        specification: '大号',
        unit: '666',
        subunit : '656',
      },{
        id :'4',
        name :'条码',
        specification: '',
        unit: '250',
        subunit : '222',
      }],

      defaultProps: {
          children: 'children',
          label: 'label'
      },

      total: 0,
    loading: false,
    radio: 3,
      queryParams:{
        date1: '',
      date2: '',
      radio: 3,
      radio1: 3,
      radio2: 3,
      radio3: 3,
      radio4: 3,
      radio5: 3,
      },
      showSearch: true,
      single: false,
      multiple: false,
      tableData:[],
      id: '',
    }
    
  },
  methods: {
    rowClassName({ row }) {
      return row.order_id == this.id ? 'selected-row' : ''; // 判断是否选中
    },
    handleQuery(){
      this.loading=false
    },
    resendUrl(row) {
      this.url = row ? row.image : '';
      if (this.url) {
        window.open(this.url, '_blank');
      } else {
        this.$message({
          type: "error",
          message: "当前阶段没有附件"
        });
      }
    },
    change_detail1(row){
      this.id = row.order_id
      this.detail_others0=row.supplier
      
    },
      change_detail2(row){
      this.detail_others=row.supplier
    },
     objectSpanMethod({ rowIndex, columnIndex }) {
      const groupSize = 3; // 每组数据的行数
      if (columnIndex < 5 || columnIndex >= 10) {
        // 序号、客人货号、工厂货号、颜色、订单数量、毛重、净重、总箱数、材质要求、交货日期、操作列
        if (rowIndex % groupSize === 0) {
          return {
            rowspan: groupSize,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else {
        // 纸箱类别、装箱率、纸箱尺寸列
        return {
          rowspan: 1,
          colspan: 1
        };
      }
      }
     ,
     resetQuery1(){
    this.queryParams1 = {
        order_id: '',
        supplier: '',
        contract: '',
        phone_no: ''
      };
     },
     resetQuery2(){
     // 方法一：直接重置数据对象
      this.queryParams2 = {
        order_id: '',
        supplier: '',
        contract: '',
        phone_no: ''
      };
     },
   
    handleDelete(row) {
      console.log("删除操作", row);
    }
  ,
  
  handleEdit(row) {
    this.currentEditRow = { ...row }; 
    this.open= true; 
    this.dialogVisible = true;
  },
  submitForm(){
    this.open = false;
  },
  cancel(){this.open = false;},
  handleQuery() {
    this.loading = false;
  },
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(data){
        console.log(data);
      },
       handleAddComm4(){
         this.titleComm4 = '新增订单'
         this.openComm4 = true;
       },
     handleAddComm3(){
         this.titleComm3 = '新增订单'
         this.openComm3 = true;
       },
        handleUpdate(row) {
        this.title = '编辑订单'
        this.open = true;
        this.isEdit = false;
        this.form = row;
      },
       handleAddComm1(){
         this.titleComm1 = '新增纸箱采购单'
         this.openComm1 = true;
       },
          handleAddComm2(){
         this.titleComm2 = '新增其他辅料购单'
         this.openComm2 = true;
       },
        handleUpdateComm1(row){
          this.titleComm1 = '编辑纸箱订单明细'
          this.openComm1 = true;
          this.formComm = row;
        },
       handleUpdateComm2(row){
          this.titleComm3 = '编辑辅料订单明细'
          this.openComm3 = true;
          this.formComm = row;
        },
  submitFormComm(){
    this.openComm = false;
  },
  
 cancelComm(){
  this.openComm1 = false;
  this.openComm2= false;
   this.openComm3 = false;
  this.openComm4= false;
 },
  showTab(row) {
    this.showCard = true
    this.detail_supplier=row.supplier
  },

      handleDelete(){},
      handleExport(){},
      handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    }
 }
  }
  
 
 </script>

<style lang="scss" scoped>
.radio-group .el-radio {
margin-right: 0px;
}

.radio-group {
border-radius: 1px;
border: 1px solid #dcdfe6;
}

  .custom-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* 移除默认边框，使用你提供的样式 */
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px; /* 统一宽度 */
  height: 178px; /* 统一高度 */
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: dotted 1px blue;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover; /* 确保图片填充容器 */
}
   
   /* 为需要缩小的上传组件添加样式 */
.small-upload .el-upload {
  width: 89px; /* 原宽度 178px 的 0.5 倍 */
  height: 89px; /* 原高度 178px 的 0.5 倍 */
  transform: scale(0.5); 
  transform-origin: top left; 
}

.small-upload .avatar-uploader-icon {
  font-size: 14px; /* 原字体大小 28px 的 0.5 倍 */
  width: 89px; 
  height: 89px; 
  line-height: 89px; 
}

.small-upload .avatar {
  width: 89px; 
  height: 89px; 
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>

